<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
  <div class="purchase-stats-section">
    <div class="time-filter">
      <el-radio-group v-model="selectedTimeUnit" size="small" @change="handleTimeChange">
        <el-radio-button label="day">今日</el-radio-button>
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="quarter">本季度</el-radio-button>
      </el-radio-group>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="6" :xs="12" :sm="12" :md="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon purchase-amount">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-title">{{ timeUnitText }}采购额</div>
            <div class="stats-value">¥{{ formatNumber(stats.purchaseAmount.value) }}</div>
            <div class="stats-change" :class="stats.purchaseAmount.changeType">
              <el-icon v-if="stats.purchaseAmount.changeType === 'increase'"><CaretTop /></el-icon>
              <el-icon v-else><CaretBottom /></el-icon>
              {{ Math.abs(stats.purchaseAmount.change) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6" :xs="12" :sm="12" :md="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon order-count">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-title">{{ timeUnitText }}采购单数</div>
            <div class="stats-value">{{ stats.orderCount.value }}</div>
            <div class="stats-change" :class="stats.orderCount.changeType">
              <el-icon v-if="stats.orderCount.changeType === 'increase'"><CaretTop /></el-icon>
              <el-icon v-else><CaretBottom /></el-icon>
              {{ Math.abs(stats.orderCount.change) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6" :xs="12" :sm="12" :md="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon cost-savings">
            <el-icon><PriceTag /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-title">{{ timeUnitText }}节约成本</div>
            <div class="stats-value">¥{{ formatNumber(stats.costSavings.value) }}</div>
            <div class="stats-change" :class="stats.costSavings.changeType">
              <el-icon v-if="stats.costSavings.changeType === 'increase'"><CaretTop /></el-icon>
              <el-icon v-else><CaretBottom /></el-icon>
              {{ Math.abs(stats.costSavings.change) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6" :xs="12" :sm="12" :md="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-icon pending-orders">
            <el-icon><Timer /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-title">待审批订单</div>
            <div class="stats-value">{{ stats.pendingOrders.value }}</div>
            <div class="stats-change" :class="stats.pendingOrders.changeType">
              <el-icon v-if="stats.pendingOrders.changeType === 'increase'"><CaretTop /></el-icon>
              <el-icon v-else><CaretBottom /></el-icon>
              {{ Math.abs(stats.pendingOrders.change) }}%
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, PropType } from 'vue'
import { Money, Document, PriceTag, Timer, CaretTop, CaretBottom } from '@element-plus/icons-vue'

type TimeUnit = 'day' | 'month' | 'quarter'
type ChangeType = 'increase' | 'decrease'

interface StatsItem {
  value: number
  change: number
  changeType: ChangeType
}

interface StatsData {
  purchaseAmount: StatsItem
  orderCount: StatsItem
  costSavings: StatsItem
  pendingOrders: StatsItem
}

export default defineComponent({
  name: 'PurchaseStatsSection',
  components: {
    Money,
    Document,
    PriceTag,
    Timer,
    CaretTop,
    CaretBottom
  },
  props: {
    stats: {
      type: Object as PropType<StatsData>,
      required: true
    },
    timeUnit: {
      type: String as PropType<TimeUnit>,
      default: 'day'
    }
  },
  emits: ['time-unit-change'],
  setup(props, { emit }) {
    const selectedTimeUnit = ref<TimeUnit>(props.timeUnit)
    
    // 根据时间单位获取对应的文本前缀
    const timeUnitText = computed(() => {
      switch (selectedTimeUnit.value) {
        case 'day':
          return '今日'
        case 'month':
          return '本月'
        case 'quarter':
          return '本季度'
        default:
          return '今日'
      }
    })
    
    // 格式化数字，添加千分位分隔符
    const formatNumber = (num: number) => {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
    
    // 处理时间单位变化
    const handleTimeChange = (unit: string | number | boolean | undefined) => {
      if (typeof unit === 'string' && (unit === 'day' || unit === 'month' || unit === 'quarter')) {
        emit('time-unit-change', unit)
      }
    }
    
    return {
      selectedTimeUnit,
      timeUnitText,
      formatNumber,
      handleTimeChange
    }
  }
})
</script>

<style scoped lang="scss">
.purchase-stats-section {
  margin-bottom: 20px;
  
  .time-filter {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
  }
  
  .el-row {
    margin-bottom: 0 !important;
  }
  
  .el-col {
    margin-bottom: 20px;
  }
  
  .stats-card {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 8px;
    border: none;
    
    :deep(.el-card__body) {
      display: flex;
      padding: 20px;
      width: 100%;
    }
    
    .stats-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
      border-radius: 12px;
      margin-right: 15px;
      
      .el-icon {
        font-size: 24px;
        color: #fff;
      }
      
      &.purchase-amount {
        background-color: #409EFF;
      }
      
      &.order-count {
        background-color: #67C23A;
      }
      
      &.cost-savings {
        background-color: #E6A23C;
      }
      
      &.pending-orders {
        background-color: #F56C6C;
      }
    }
    
    .stats-info {
      flex: 1;
      
      .stats-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }
      
      .stats-value {
        font-size: 22px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 5px;
      }
      
      .stats-change {
        font-size: 12px;
        display: flex;
        align-items: center;
        
        &.increase {
          color: #67C23A;
        }
        
        &.decrease {
          color: #F56C6C;
        }
        
        .el-icon {
          margin-right: 3px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .purchase-stats-section {
    .time-filter {
      justify-content: center;
    }
    
    .stats-card {
      .stats-icon {
        width: 50px;
        height: 50px;
        
        .el-icon {
          font-size: 20px;
        }
      }
      
      .stats-info {
        .stats-value {
          font-size: 18px;
        }
      }
    }
  }
}
</style> 